/**
 * Created by easezhi on 2015/4/24.
 */

/**
 * jquery实现的网页弹窗，传入需要显示的消息字符串或者dom对象，以及样式
 * @param v
 * @param op
 * @returns {{close: Function, hide: Function, show: Function}}
 */

function toast(v ,op){
    if(!op){
        op = {}
    }
    var sWidth = screen.availWidth;
    var sHeight = screen.availHeight;
    var wWidth = window.innerWidth;
    var wHeight = window.innerHeight;

    var wrapper = $('<div></div>')
    wrapper.css({
        position:'fixed'
        ,'z-index':'5000'
    })

    //预显示内容装入toast，如果消息内容是dom元素，就直接显示
    var conReg = /(^<\w+.*>.*<\x2f\w+>$|^<\w+.*\x2f\s*>$)/;
    if(typeof v == 'string' && !conReg.test(v)){

        var textWrapper = $('<span style="line-height:2.2;padding:0 0.6em;"></span>')
        textWrapper.text(v);
        wrapper.html(textWrapper)
        wrapper.css({
            'background-color':op['bgColor'] || '#ccc'
            ,color:op.color || '#333'
            ,'border-radius':op['radius'] || '5px'
        })
    }
    /*wrapper.html(v)
     wrapper[0].innerHTML = v;*/
    wrapper.append($(v))


    //把预显示内容添加到body元素
    $(document.body).append(wrapper)

    //根据预显示内容的宽高进行定位
    var width = wrapper.width();
    var left = wWidth*0.5 - width*0.5;
    var pos = {left: left+'px'}//默认左偏移
    if(op.left || op.left===0 || op.right || op.right===0){
        pos.left = op.left;
        pos.right = op.right;
    }

    switch (op.pos){
        case 'top':pos.top = op.top || wHeight*0.2+'px';break;
        case 'bottom':pos.bottom = op.bottom || wHeight*0.2+'px';break;
        default :
            var height = wrapper.height();//数字类型的值
            var top = window.innerHeight*0.5 - height*0.6;
            if(top < 70){top = 70}
            if(op.top || op.top===0 || op.bottom || op.bottom===0){
                pos.top = op.top;
                pos.bottom = op.bottom;
            }else{
                pos.top = top+'px';
            }

    }
    wrapper.css(pos)

    //类型是toast，默认自动关闭，timeout 2000毫秒，设timeout为0禁止自动关闭
    var timeout = 0;
    if(!(op.timeout===0)){
        timeout = op.timeout || 2000;
        if(op.type == 'toast' || op.type == undefined ){
            setTimeout(function(){
                t.close();
            },timeout)
        }
    }

    //类型是popup,点击页面其他位置关闭
    var veil = $('<div></div>')//遮幕
    veil.css({
        position:'fixed'
        ,'z-index':4900
        ,width:wWidth
        ,height:sHeight
        ,'background-color':op.veilColor || 'rgba(0,0,0,0)'
        ,top:0
        ,left:0
    })

    if(op.type == 'popup' ){
        $(document.body).append(veil)
        if(!op.disableClose){
            veil.click(function(){
                t.close();
            })
        }
    }

    //类型是弹出窗口，可选右上角的关闭按钮
    if(op.hasCloseBtn==true || op.type=='dialog' && !(op.hasCloseBtn===false)){
        $(document.body).append(veil)
        var btnWrapper = $('<div></div>')
        var btn = $('<div>X</div>')
        btnWrapper.css({
            position:'absolute'
            ,top:'-13px'
            ,right:'-13px'
            ,padding:'3px'
        })
        btn.css({
            width:'20px'
            ,'text-align':'center'
            ,'line-height':'20px'
            ,'border-radius':'50%'
            ,'background-color':op.btnColor || '#999'
            ,color:'#fff'
            ,'font-family': '"微软雅黑",sans-serif'
        })
        wrapper.append(btnWrapper)
        btnWrapper.append(btn)
        btnWrapper.click(function(){
            t.close();
        })

    }

    var t = {
        close:function(){
            if(typeof op.onClose == 'function'){
                var res = op.onClose();
                if(res===false){
                    return;
                }
            }
            wrapper.remove();
            veil.remove()
        }
        ,hide:function(){
            wrapper.hide();
            veil.hide();
        }
        ,show:function(){
            wrapper.show();
            veil.show();
        }
    }
    return t;
}